<template>
  <div>
    <div style="margin-bottom:20px">
      <el-input v-model="name" style="width:200px" placeholder="请输入姓名"></el-input>
      <el-button type="warning" style="margin-left:10px" @click="load()">查询</el-button>
      <el-button type="warning" style="margin-left:10px" @click="reset()">清空</el-button>
      <el-button type="primary" style="margin-left:10px" @click="handleAddEmp()">新增员工</el-button>
    </div>
    <div>
      <el-table :data="records" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="姓名" >
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="password" label="密码" >
        </el-table-column>
        <el-table-column prop="phone" label="电话" min-width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="50">
          <template slot-scope="scope">
            <div v-if="scope.row.sex==1" >男</div>
            <div v-else >女</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="65">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="200">
        </el-table-column>
        <el-table-column prop="createUser" label="创建人" width="200">
        </el-table-column>
        <el-table-column prop="updateUser" label="更新人" width="200">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <!--  <template>标签结合slot-scope属性用于创建作用域插槽（Scoped Slots），它允许父组件向子组件传递可复用的模板，并且能够访问到子组件传递过来的数据。-->
          <template slot-scope="scope">
            <el-button type="primary" @click="handleUpdateEmp(scope.row)">修改</el-button>
            <el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status == 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button type="danger" @click="handleDeleteEmp(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
          style="text-align: center;margin-top: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      name: '',  //员工姓名，对应上面的输入框
      page: 1,   //页码
      pageSize: 5,    //每页记录数
      total: 0,    //总记录数
      records: []  //当前页要展示的数据集合
    }
  },
  created() {
    this.load()
  },
  methods: {

    //查询员工
    load() {
      const params = {name: this.name, page: this.page, pageSize: this.pageSize}
      request.get("/admin/employee/page", {params}).then(res => {
        if (res.code === 1) {
          this.total = res.data.total
          this.records = res.data.records
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err.message)
      })
    },

    //新增员工(跳转到新增员工组件)
    handleAddEmp() {
      this.$router.push('/employee/add')
    },

    //修改员工
    handleUpdateEmp(row) {
      if (row.username === 'admin'){
        this.$message.error('超级管理员不可修改')
        return
      }
      //跳转到修改页面，通过地址栏传参
      this.$router.push({
        path:'/employee/add',
        query: {
          id: row.id
        }
      })
    },

    //删除员工
    handleDeleteEmp(row){

      //超级管理员不可删除
      if (row.username === 'admin'){
        this.$message.error('超级管理员不可删除')
        return
      }
      this.$confirm('确定要删除该员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/admin/employee/delete/${row.id}`).then(res => {
          if (res.code == 1) {
            this.$message.success('删除成功')
            this.load()
          }
        })
      }).catch(() => {
        this.$message.info('取消操作')
      })
    },

    // 重置搜索框
    reset() {
      this.name = ''
      this.load()
    },

    // 启用禁用员工账号
    handleStartOrStop(row) {
      //超级管理员不可修改状态
      if (row.username === 'admin') {
        this.$message.error('超级管理员不可修改状态')
        return
      }
      //提示框
      this.$confirm(`确定要${row.status == 1 ? '禁用' : '启用'}该员工账号吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const p = {
          id: row.id, // 员工ID
          status: !row.status ? 1 : 0 // 当前状态值
        }
        request.post(`/admin/employee/status/${p.status}`, JSON.stringify(p.id))
            .then(res => {
              if (res.code == 1) {
                this.$message.success('操作成功')
                this.load()
              }
            })
      }).catch(() => {
        this.$message.info('取消操作')
      })
    },



    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(page) {
      this.page = page
      this.load()
    }
  }

}


</script>

<style>
</style>